<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}"/>
<script type="text/javascript" th:src="@{/js/jquery-1.11.3.min.js}" ></script>
<link rel="stylesheet" th:href="@{/js/layui-v2.5.4/layui/css/layui.css}" />
<script type="text/javascript" th:src="@{/js/layui-v2.5.4/layui/layui.js}" ></script>
<script type="text/javascript" th:src="@{/js/common.js}" ></script>

<script type="text/javascript" th:src="@{/js/nice-validator-1.1.4/dist/jquery.validator.min.js?local=zh-CN}" ></script>


<title>桂林城市大脑门户登录</title>

<style type="text/css">
/* 登录页面 */
.login_bg{
	width: 100vw;
	height: 100vh;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.login_header{

}
.layadmin-user-login-body .layui-form-item {
    position: relative;
}
.layadmin-user-login-icon {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 38px;
    line-height: 36px;
    text-align: center;
    color: #d2d2d2;
}
.layadmin-user-login-body .layui-form-item .layui-input {
    padding-left: 38px;
    height: 40px;
}
.layadmin-user-login-codeimg {
    max-height: 38px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}
.layadmin-user-login-box {
    padding: 20px;
}
input::placeholder{
	color: #d2d2d2;
}
</style>
<script type="text/javascript">

</script>
</head>

<body onkeydown="key_down(event.keyCode);" >

	<div class="login_bg" >
		<div style="width:375px;" align="center">
			<div class="login_header layadmin-user-login-box">
		      <h2 style="font-size:30px;font-weight:300;color:#000;margin-bottom: 10px;" >PortalLogin</h2>
		      <p style="font-size:20px;font-weight:300;color:#999;" >桂林城市大脑门户登录</p>
		    </div>

		    <form id="loginForm" class="layadmin-user-login-box layadmin-user-login-body layui-form">

				 <div class="layui-form-item">
			        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
			        <input type="text" name="userName" id="userName" placeholder="用户名" class="layui-input">
			      </div>
			      <div class="layui-form-item">
			        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
			        <input type="password" name="password" id="password"  placeholder="密码" class="layui-input">
			      </div>

			      <!-- <div class="layui-form-item">
			        <div class="layui-row">
			          <div class="layui-col-xs7">
			            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
			            <input type="text" name="imageCode" id="imageCode"  placeholder="图形验证码" class="layui-input">
			          </div>
			          <div class="layui-col-xs5">
			            <div style="margin-left: 10px;">
			              <img th:src="@{/login/imageCode}" class="layadmin-user-login-codeimg" onclick="refreshImageCode(this)" >
			            </div>
			          </div>
			        </div>
			      </div> -->

			      <div class="layui-form-item" style="margin:30px 0px;">
			        <div class="layui-btn layui-btn-fluid" onclick="login()" lay-filter="LAY-user-login-submit">登录</div>
			      </div>

			      <div align="center" style="color:#999;" >
			      		建议使用<img th:src="@{/images/chrome.png}" style="width:18px;margin:-3px 4px 0px 4px;" />Google Chrom 浏览器
			      </div>

		    </form>

		</div>
	</div>

	
	<!-- <div class="copyright" style="width:100%;">
		Powered by 苏州富士通医学科技有限公司  数字医疗技术部
	</div> -->


<script type="text/javascript">
if(window != top){
	//session 失效 判断有没父页面，有，改变父页面地址
	top.location.href = location.href;
}

//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
	var layer = layui.layer;
	var form = layui.form;

  	form.render();
  	form.on('submit', function(data){
  		//alert(1);
  		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  	});

  	$('#loginForm').validator({
		//theme : 'yellow_right',
		ignore: ':hidden',  //忽略验证
		timely: 1,   //失去焦点验证
		msgMaker:false, //不用默认消息
		validation: function(element, result){
			myCommon.niceValidatorValidation(element, result);
	    },
		rules: {
	        // 自定义规则mobile，如果通过返回true，否则返回错误消息
	        //userName: [/^[1][0-9]{10}$/, '请输入正确的手机号码'],
	        //user_name_my: [/^[\w.-]+$/, '请输入字母和数字的组合(可以有_.-)']
	    },
		fields : {
			"userName" : {
				rule : "required",
				msg : {
					required : "请输入用户名"
				}
			},
			"password" : {
				rule : "required",
				msg : {
					required : "请输入密码"
				}
			}
			/* "imageCode" : {
				rule : "required",
				msg : {
					required : "请输入图形验证码"
				}
			} */
		}
	});
});

function login(){

	$('#loginForm').isValid(function(v){
		if(v){
			layer.msg('登录中...', {icon: 16, time: 0, shade: [0.3, '#393D49']});

			var paramString = $("#loginForm").serialize();
			//console.log(paramString);

			$.ajax({
				type: "POST",
				async: true,  //默认true,异步
				data: paramString,
				//dataType: 'text',
				url: "[[@{/login}]]",
				success:function(data){
					if(data && data.code){
						if(data.code == "OK"){
							layer.closeAll();
							if(data.data){
                	    		if(data.data.type == "redirect"){
                	    			window.location.href = data.data.targetUrl;
                	    		}else{
                	    			//选择客户端
                	    			//alert("选择客户端");
                	    			//app.pageload(false);
                	    			//app.selectClientFrame = true;
                	    			//app.selectClientFrameUrl = "[[@{/index/clientList}]]";
                	    			layer.open({
                	    				type: 2,
                	    				title: "操作选项",
                	    			  	area: ['70%', '70%'],
                	    			  	content: "[[@{/index/clientList}]]"
                	    			});
                	    		}
                	    	}else{
                	    		window.location.href = "[[@{/index/index}]]";
                	    	}
						}else if(data.code == "FAIL"){
							layer.alert(data.message, {icon: 2});
						}else{
							layer.alert('登陆失败！', {icon: 2});
						}
					}else{
						layer.alert('登陆失败！', {icon: 2});
					}
			    }
			});
		}
	});
}

function refreshImageCode(obj){
	//刷新图形验证码
	//alert("refreshImageCode");
	$(obj).attr("src", "[[@{/login/imageCode}]]?t="+ Math.random());
}

function key_down(num){
	if(num == 13) {
		login();
	}
}
</script>
</body>

</html>
